<template>
  <div>
    <el-button type="success" icon="el-icon-circle-plus" @click="add"
      >新增</el-button
    >
    <!-- 8.2父子通讯改值通过$emit事件 -->
    <v-list ref="list" @edit="edit"></v-list>
    <!-- 10.9 父子通讯改传递更新数据的事件 -->
    <v-info ref="info" @updata="updata" :info="info"></v-info>
  </div>
</template>

<script>
import vInfo from "./info.vue";
import vList from "./list.vue";
export default {
  components: {
    vInfo,
    vList,
  },
  data() {
    return {
      info: {
        isshow: false,
        /* 8.6根据点击的不同的功能切换不同的标题 */
        type: "add",
      },
    };
  },
  methods: {
    // 1.添加
    add() {
      this.info.isshow = true;
      /* 8.7点击新增时是add */
      this.info.type = "add";
      /* 9.4在修改后点击新增会发现数据依旧在输入框中,那是编辑功能改变了info中的表单的内容,所以在点击添加时重置表单内容 */
      this.$refs.info.setValue({
        title: "",
        img: "",
        status: 1,
      });
    },
    // 2.编辑
    edit(info) {
      /* 8.4 代表isshow的值使其显示 */
      this.info.isshow = true;
      /* 8.5 同时改变弹框标题的内容 */
      /* 8.7 点击编辑时是edit */
      this.info.type = "edit";
      /*9 因为是编辑,要把info的值添加进弹框中。通过ref的方法实现子传父，父再传子 */
      /* 9.1将info值通过父元素给info子元素 */
      this.$refs.info.setValue(info);
    },
    // 10.更新数据
    /* 10.8 因为只是通过父元素通知list更新数据，所以不需要传参了 */
    updata() {
      // console.log(111);
      this.$refs.list.getbannerList();
    },
  },
};
</script>

<style>
</style>